<template>
  <CustomEcharts id="echarts" height="9.8rem" :full-options="echartsOptions" :loading="false">
  </CustomEcharts>
</template>

<script setup>
// 引进Echarts 组件
import { onMounted, reactive, defineProps, watch } from "vue";
import CustomEcharts from './customEcharts.vue';
import * as echarts from 'echarts';

const props = defineProps({
  echartsData: Object,
});
const echartsOptions = reactive({
  options: {},
  init: false
});



const testOption = (data, dimensions) => {
  const option = {
    dataZoom: [{
      type: 'slider',
      show: true, //flase直接隐藏图形
      xAxisIndex: [0],
      left: '5%', //滚动条靠左侧的百分比
      right: 50,
      bottom: -5,
      start: 35,//滚动条的起始位置
      end: 65 //滚动条的截止位置（按比例分割你的柱状图x轴长度）
    }],
    legend: {
      icon: 'reat',
      top: '1%',
      itemWidth: 6,
      itemHeight: 3,
      itemGap: 20,
      textStyle: {
        color: '#fff'
      }
    },
    tooltip: {
      trigger: "axis",
    },
    grid: {
      left: 0,
      right: "0",
      bottom: "3%",
      top: "20%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      boundaryGap: false, //坐标轴两边留白
      data: props.echartsData.xaxis ? props.echartsData.xaxis : [
        "1",
        "2",
        "3",
        "4",
        "5",
        "6",
        "7",
        "8",
        "9",
        "10",
        "11",
        "12",
        "13",
        "14",
        "15",
      ],
      axisLabel: {
        //坐标轴刻度标签的相关设置。
        interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
        //	margin:15,
        textStyle: {
          color: "#fff",
          fontStyle: "normal",
          fontFamily: "微软雅黑",
          fontSize: 12,
        },
      },
      axisTick: {
        //坐标轴刻度相关设置。
        show: false,
      },
      axisLine: {
        show: true,

        //坐标轴轴线相关设置
        lineStyle: {
          color: "rgba(106, 254, 158, 0.60)",
        },
      },
      splitLine: {
        //坐标轴在 grid 区域中的分隔线。
        show: true,
        lineStyle: {
          color: "#ffffff1f",
          opacity: 0,

        },
      },
    },
    yAxis: [
      {

        type: "value",
        name: "万元",
        nameLocation: 'end',
        position: 'left',
        splitNumber: 5,
        min: 0,
        max: Math.max(...props.echartsData.series[0].data1),
        nameTextStyle: {
          color: "green", //颜色
          padding: [15, 20, 15, 0], //间距分别是 上 右 下 左
        },
        axisLabel: {

          textStyle: {
            color: "#fff",
            fontStyle: "normal",
            fontFamily: "微软雅黑",
            fontSize: 12,
          },
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#10665A'
          }
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
          lineStyle: {
            color: "#ffffff1f",
            type: "dashed",
            // 	opacity:0.1
          },
        },
      },
      {
        type: "value",
        name: "万辆",
        position: 'right',
        splitNumber: 5,
        min: 0,
        max: Math.max(...props.echartsData.series[0].data2),
        axisLabel: {
          show:true,
          textStyle: {
            color: "#fff",
            fontStyle: "normal",
            fontFamily: "微软雅黑",
            fontSize: 12,
          },
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#10665A'
          }
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
          lineStyle: {
            color: "#ffffff1f",
            // 	opacity:0.1
          },
        },
      },
    ],
    series: [
      {
        name: "通行费",
        type: "line",
        smooth: true,
        symbolSize: 0,
        showAllSymbol: false,
        yAxisIndex:0,
        itemStyle: {
          normal: {
            color: "#F8C479",
            lineStyle: {
              color: "#F8C479",
              width: 2,
            },

            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(233, 149, 93, 0.6)',
                },
                {
                  offset: 1,
                  color: "rgba(233, 149, 93, 0)",
                },
              ]),
            },
          },
        },
        label: {
          show: false
        },
        lineStyle: {
          type: "dashed",
          color: `rgb(191, 53, 44)`,
          width: 2,
        },
        data: props.echartsData.series[0].data1,
      },
      {
        name: "通行量",
        type: "line",
        smooth: true,
        symbolSize: 0,
        showAllSymbol: false,
        yAxisIndex:1,
        label: {
          show: false
        },
        lineStyle: {
          type: "dashed",
          color: `rgb(191, 53, 44)`,
          width: 2,
        },
        itemStyle: {
          normal: {
            color: "#1DE97B",
            lineStyle: {
              color: "#1DE97B",
              width: 2,
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(7, 221, 183, 0.6)',
                },
                {
                  offset: 1,
                  color: "rgba(7, 221, 183, 0)",
                },
              ]),
            },
          },
        },
        data: props.echartsData.series[0].data2,
      },

    ],
  };
  return option;
}

watch(()=>props.echartsData,val=>{
  echartsOptions.options = testOption([], ['name', 'value']);
},{deep:true})
// 此处可请求接口来获取数据
// 我的options配置使用的是dataset的形式，传进options中的两个参数data（图表的数据）和dimension（图表的维度），
onMounted(() => {
  const testData = [
    { value: 26, name: '家用电器' },
    { value: 27, name: '户外运动' },
    { value: 24, name: '汽车用品' },
    { value: 23, name: '手机数码' }
  ];
  const testDimensions = ['name', 'value'];
  echartsOptions.options = testOption(testData, testDimensions);
});
</script>